<template>
	<div>
		<div id="type_container" v-if="type != 'dispatcher' && type != 'search'">
			<span v-for="(t, i) in orderTypes"
			:class="{active: orderTypeActive.name === t.name}"
			@click="clickType(t,i)">{{t.name}}</span>
		</div>
		<div id="list_container" :class="{dispatcher: type === 'dispatcher' || type === 'search'}"
		v-if="isLoaded">
			<listItem v-for="(o, i) in orders" :key="i"
			:item="o"
			@routeChange="activeIndex = i"></listItem>
			<div class="c-empty" v-if="!orders.length">
				<p>暂无相关订单</p>
			</div>
			<p class="c-end-tip"
			v-show="isEnd">没有更多啦</p>
		</div>
		<!-- 加载页面 -->
		<loading v-else></loading>
		<div id="add_container" v-if="type == 'user'">
			<router-link class="c-txt-m"
			to="/repair/neworder">新建报修单</router-link>
		</div>
		<router-link class="c-bottom"
		v-if="type !== 'user' && type !== 'search'"
		:to="`/repair/search/${type}`">筛选</router-link>
	</div>
</template>
<script>
	import listItem from './ListItem'
	import loading from './Loading'
	import {loadMore, myHttp} from './assets/js/utils.js'
	import {getUser} from './assets/js/global.js'
	export default{
		name:'list',
		data(){
			return{
				// type:角色类型
				user:{},
				type:'',
				userId:'',
				maintainUserId:'',
				repairNo:'',
				orgId:'',
				address:'',
				repairTimeStartStr:'',
				repairTimeEndStr:'',
				requestUserName:'',
				orderTypes:[],
				orderTypeActive:'',
				orders:[],
				activeIndex: '',
				status:'',
				page: 1,
				loadMore: '',
				isEnd: false,
				isLoaded: false
			}
		},
		mounted(){
			document.title = '报修单列表';
			this.type = this.$route.params.type;
			getUser().then((user) => {
				if(!user) return;
				this.user = user;
				//为什么initial().bind(this)不行
				initial.call(this);
			})
			function initial(){
				switch(this.type) {
					case 'user':
						this.orderTypes = [{
							name: '全部',
							status: ['']
						},{
							name: '待接收',
							status: ['WAIT_RECEIVE','DISPATCH_S']
						},{
							name: '处理中',
							status: ['IN_HANDLE']
						},{
							name: '处理完毕',
							status: ['FINISH', 'WAIT_EVALUATE']
						}]
						this.userId = localStorage.getItem('userId');
						break;
					case 'boss':
						this.orderTypes = [{
							name: '全部',
							status: ['WAIT_DISPATCH','IN_HANDLE','WAIT_RECEIVE','FINISH', 'WAIT_EVALUATE']
						},{
							name: '待分配',
							status: ['WAIT_DISPATCH']
						},{
							name: '处理中',
							status: ['IN_HANDLE','WAIT_RECEIVE']
						},{
							name: '处理完毕',
							status: ['FINISH', 'WAIT_EVALUATE']
						}]
						this.orgId = this.user.orgIds.join('@');
						break;
					case 'repairman':
						this.orderTypes = [{
							name: '全部',
							status: ['IN_HANDLE','WAIT_RECEIVE','FINISH', 'WAIT_EVALUATE']
						},{
							name: '待处理',
							status: ['IN_HANDLE','WAIT_RECEIVE']
						},{
							name: '处理完毕',
							status: ['FINISH', 'WAIT_EVALUATE']
						}]
						this.maintainUserId = localStorage.getItem('userId');
						break;
					case 'dispatcher':
						this.orderTypes = [{
							name: '全部',
							status: ['DISPATCH_S']
						}]
						break;
					case 'search':
						let data = {};
						try{
							data = JSON.parse(localStorage.getItem('searchData'));
						} catch(err) { return; }
						this.orderTypes = [{
							name: '全部',
							status: data.status
						}]
						this.userId = data.userId;
						this.maintainUserId = data.maintainUserId;
						this.repairNo = data.repairNo;
						this.orgId = data.orgId;
						this.address = data.address;
						this.repairTimeStartStr = data.repairTimeStartStr;
						this.repairTimeEndStr = data.repairTimeEndStr;
						this.requestUserName = data.requestUserName;
						break;
				}
				this.orderTypeActive = this.orderTypes[this.$route.query.nav || 0];
				this.status = this.orderTypeActive.status.join('@');
				this.getData();
			}
		},
		methods:{
			clickType(t, i){
				this.orderTypeActive = t;
				this.status = t.status.join('@');
				this.$router.replace({path: `/repair/list/${this.type}`, query: {nav: i}});
				this.clear();
				this.getData();
			},
			getData(){
				myHttp('getRepairList.do', this.requestData, () => {
					// 只有切换第一页的时候需要整夜loading提示
					if(this.page === 1) this.isLoaded = false;
				}).then((r) => {
					this.isLoaded = true;
					if(r.failed) return;
					let orders = r.obj.dataPage.rows;
					if(orders.length){
						orders.forEach((e, i) => {
							// 中止的订单
							if(e.statusCode != 'STOP') e.to = `/repair/order/${this.type}/${e.id}`;
							else e.to = '';
							// 设置自动评价天数
							localStorage.setItem('autoDay', e.autoDay);
						})
						this.orders = this.orders.concat(orders);
						if(this.loadMore) this.loadMore.loading = false;
						// 当拉回来第一次数据时打开下拉加载
						if(this.page === 1) {
							this.$nextTick(() => {
								if(document.body.scrollHeight <= Math.round(window.innerHeight) && this.orders.length) this.isEnd = true;
								else {
									console.log('打开下拉加载')
									this.loadMore = new loadMore({cb: this.getData});
									this.loadMore.open();
								}
							})
						}
					} else {
						if(this.loadMore) {
							this.loadMore.close();
							console.log('关闭下拉加载')
						}
						if(this.page > 1) this.isEnd = true;
					}
					this.page++;
				})
			},
			clear(){
				this.orders = [];
				this.page = 1;
				if(this.loadMore) this.loadMore.close();
				this.loadMore = '';
				this.isEnd = false;
				console.log('关闭下拉加载')
			}
		},
		computed:{
			requestData(){
				return {
					status: this.status,
					maintainUserId:this.maintainUserId,
					repairNo: this.repairNo,
					orgId: this.orgId,
					address: this.address,
					repairTimeStartStr: this.repairTimeStartStr,
					repairTimeEndStr: this.repairTimeEndStr,
					pageNumber: this.page,
					pageSize: 20,
					userId: this.userId,
					requestUserName: this.requestUserName
				}
			}
		},
		beforeRouteLeave(to, from, next) {
			// 设置订单相关本地数据
		   localStorage.setItem('orderIndex', this.activeIndex);
		   localStorage.setItem('orders', JSON.stringify(this.orders));
		   localStorage.setItem('requestData', JSON.stringify(this.requestData));
		   next();
		},
		beforeDestroy(){
			if(this.loadMore) this.loadMore.close();
		},
		components: {listItem, loading}
	}
</script>
<style lang='less' scoped>
	@baseColor: #64a6f2;
	#type_container{
		height: 1.07rem;
		line-height: 1.07rem;
		display: flex;
		justify-content: space-around;
		background: #fff;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 10;
		border-bottom: 1px solid #bbb;
		span{
			font-size: 0.4rem;
			color: #333;
			height: 1.07rem;
			&.active{
				color: @baseColor;
				border-bottom: 0.05rem solid @baseColor;
			}
		}
	}
	#list_container{
		padding-top: 1.07rem;
		padding-bottom: 2rem;
		width: 100%;
		.list-item{
			width: 100%;
		}
		&.dispatcher{
			padding-top: 0;
		}
	}
	#add_container{
		position: fixed;
		bottom: 0;
		left: 0;
		height: 1.31rem;
		line-height: 1.31rem;
		width: 100%;
		background: #fff;
		border-top: 1px solid #a0a0a0;
		text-align: center;
		a{
			display: inline-block;
			padding-left: 0.83rem;
			background: url(./assets/img/add@1.5x.png) left center no-repeat;
			background-size: 0.6rem;
		}
	}
</style>
